<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
        多了如下几个方法
         loadstart:在接收到响应的第一个字节时触发。  progress:在接收响应期间反复触发。
         error:在请求出错时触发。
         abort:在调用 abort()终止连接时触发。
         load:在成功接收完响应时触发。
         loadend:在通信完成时，且在 error、abort 或 load 之后触发。
         onprogress 具体可以打印对象查看
    /*
        load事件用于在响应完成后触发
        可以代替readystatechange事件
     */
    
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        if((xhr.status >=200 && xhr.status <300) || xhr.status === 404){
            console.log(xhr.responseText)
        }else{
            console.log('fail',xhr.status)
        }
    }
    
    // 可以显示进度信息
    xhr.onprogress = function(event){
        if(event.lengthComputable){
            console.log(event)
        }
    }
    
    xhr.open('get','youUrl',true)
    xhr.send(null)
    
</script>
</body>
</html>